import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  FolderOpen, 
  MapPin, 
  FileText, 
  AlertTriangle,
  TrendingUp,
} from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";

export default function StatsOverview({ stats, isLoading }) {
  const statCards = [
    {
      title: "在建项目",
      value: stats.activeProjects,
      icon: FolderOpen,
      color: "blue",
      description: "正在施工的项目数量",
      trend: "+12%"
    },
    {
      title: "跨越点总数",
      value: stats.totalCrossingPoints,
      icon: MapPin,
      color: "green",
      description: "所有项目跨越点",
      trend: "+8%"
    },
    {
      title: "待审批方案",
      value: stats.pendingSchemes,
      icon: FileText,
      color: "orange",
      description: "需要审批的施工方案",
      trend: "+3%"
    },
    {
      title: "高优先级",
      value: stats.highPriorityCrossings,
      icon: AlertTriangle,
      color: "red",
      description: "紧急处理的跨越点",
      trend: "-5%"
    }
  ];

  const getColorClasses = (color) => {
    const colors = {
      blue: "from-blue-500 to-blue-600 text-blue-600 bg-blue-50 border-blue-200",
      green: "from-green-500 to-green-600 text-green-600 bg-green-50 border-green-200",
      orange: "from-orange-500 to-orange-600 text-orange-600 bg-orange-50 border-orange-200",
      red: "from-red-500 to-red-600 text-red-600 bg-red-50 border-red-200"
    };
    return colors[color];
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
      {statCards.map((stat, index) => (
        <Card key={index} className="relative overflow-hidden shadow-lg border-0 bg-white">
          <div className={`absolute top-0 right-0 w-32 h-32 opacity-10 transform translate-x-8 -translate-y-8 rounded-full bg-gradient-to-br ${getColorClasses(stat.color).split(' ').slice(0, 2).join(' ')}`} />
          
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-sm font-medium text-gray-600 mb-1">
                  {stat.title}
                </CardTitle>
                {isLoading ? (
                  <Skeleton className="h-8 w-16" />
                ) : (
                  <div className="text-3xl font-bold text-gray-900">
                    {stat.value}
                  </div>
                )}
              </div>
              <div className={`p-3 rounded-xl bg-opacity-20 ${getColorClasses(stat.color).split(' ')[2]} ${getColorClasses(stat.color).split(' ')[3]}`}>
                <stat.icon className={`w-6 h-6 ${getColorClasses(stat.color).split(' ')[1]}`} />
              </div>
            </div>
          </CardHeader>
          
          <CardContent className="pt-0">
            <p className="text-xs text-gray-500 mb-2">{stat.description}</p>
            <div className="flex items-center gap-1">
              <TrendingUp className="w-3 h-3 text-green-500" />
              <span className="text-xs font-medium text-green-600">{stat.trend}</span>
              <span className="text-xs text-gray-400">vs 上月</span>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}